export class EnvironmentPanelMinimal {
    constructor(container, options = {}) {
        console.log('EnvironmentPanelMinimal: 构造函数开始');
        console.log('EnvironmentPanelMinimal: 容器:', container);
        
        this.container = container;
        this.panel = null;
        this.isVisible = false;
        this.options = {
            currentEnvironment: 'default',
            currentCharacter: 'liqingzhao',
            onEnvironmentChange: null,
            onCharacterChange: null,
            onSettingsChange: null,
            ...options
        };
        
        this.currentEnvironment = this.options.currentEnvironment;
        this.currentCharacter = this.options.currentCharacter;
        
        console.log('EnvironmentPanelMinimal: 开始初始化');
        this.init();
    }
    
    init() {
        console.log('EnvironmentPanelMinimal: init 开始');
        this.createPanel();
        if (this.panel) {
            this.setupEventListeners();
            console.log('EnvironmentPanelMinimal: 初始化完成');
        } else {
            console.error('EnvironmentPanelMinimal: 初始化失败 - panel 为 null');
        }
    }
    
    createPanel() {
        console.log('EnvironmentPanelMinimal: 开始创建面板');
        
        try {
            // 创建面板元素
            this.panel = document.createElement('div');
            this.panel.className = 'environment-panel-minimal';
            this.panel.style.display = 'none';
            console.log('EnvironmentPanelMinimal: 面板元素创建成功');
            
            // 设置简单的HTML内容
            this.panel.innerHTML = `
                <div style="background: rgba(0,0,0,0.9); color: white; padding: 20px; border-radius: 10px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
                    <h3>环境设置面板</h3>
                    <p>当前环境: ${this.currentEnvironment}</p>
                    <p>当前角色: ${this.currentCharacter}</p>
                    <button id="closePanel" style="background: #ff4444; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;">关闭</button>
                    <button id="applyChanges" style="background: #4444ff; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; margin-left: 10px;">应用更改</button>
                </div>
            `;
            console.log('EnvironmentPanelMinimal: HTML 内容设置完成');
            
            // 添加到容器
            if (this.container) {
                this.container.appendChild(this.panel);
                console.log('EnvironmentPanelMinimal: 面板已添加到容器');
            } else {
                console.error('EnvironmentPanelMinimal: 容器不存在');
                this.panel = null;
                return;
            }
            
            console.log('EnvironmentPanelMinimal: createPanel 完成');
            
        } catch (error) {
            console.error('EnvironmentPanelMinimal: createPanel 出错:', error);
            console.error('EnvironmentPanelMinimal: 错误详情:', error.message);
            console.error('EnvironmentPanelMinimal: 错误堆栈:', error.stack);
            this.panel = null;
        }
    }
    
    setupEventListeners() {
        console.log('EnvironmentPanelMinimal: 开始设置事件监听器');
        
        if (!this.panel) {
            console.error('EnvironmentPanelMinimal: panel 为 null，无法设置事件监听器');
            return;
        }
        
        // 关闭按钮
        const closeBtn = this.panel.querySelector('#closePanel');
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                console.log('EnvironmentPanelMinimal: 关闭按钮被点击');
                this.hide();
            });
            console.log('EnvironmentPanelMinimal: 关闭按钮事件监听器设置成功');
        } else {
            console.log('EnvironmentPanelMinimal: 找不到关闭按钮');
        }
        
        // 应用更改按钮
        const applyBtn = this.panel.querySelector('#applyChanges');
        if (applyBtn) {
            applyBtn.addEventListener('click', () => {
                console.log('EnvironmentPanelMinimal: 应用更改按钮被点击');
                this.applyChanges();
            });
            console.log('EnvironmentPanelMinimal: 应用更改按钮事件监听器设置成功');
        } else {
            console.log('EnvironmentPanelMinimal: 找不到应用更改按钮');
        }
        
        console.log('EnvironmentPanelMinimal: 事件监听器设置完成');
    }
    
    show() {
        console.log('EnvironmentPanelMinimal: 显示面板');
        if (this.panel) {
            this.panel.style.display = 'block';
            this.isVisible = true;
        }
    }
    
    hide() {
        console.log('EnvironmentPanelMinimal: 隐藏面板');
        if (this.panel) {
            this.panel.style.display = 'none';
            this.isVisible = false;
        }
    }
    
    toggle() {
        console.log('EnvironmentPanelMinimal: 切换面板显示状态');
        if (this.isVisible) {
            this.hide();
        } else {
            this.show();
        }
    }
    
    applyChanges() {
        console.log('EnvironmentPanelMinimal: 应用更改');
        if (this.options.onSettingsChange) {
            this.options.onSettingsChange({
                environment: this.currentEnvironment,
                character: this.currentCharacter
            });
        }
        this.hide();
    }
}